<template>
    <div>
        <el-card class="card_userSelect">

            <el-form :model="queryUserParams" :inline="true" ref="queryUserForm" size="small" label-width="150px">
                <el-row>
                    <el-form-item label="筛选用户方式">
                        <el-select v-model="queryUserParams.params.queryUserType" placeholder="请输入筛选用户方式"
                            @change="queryUser" clearable>
                            <el-option label="- 打开了新数据接收的用户 -" value="new"></el-option>
                            <el-option label="- 打开了自助接收数据的用户 -" value="selfRec"></el-option>
                            <el-option label="- 全部用户 -" value="all"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="快速筛选" prop="queryOrgList">
                        <el-select v-model="queryUserParams.params.queryOrgList" placeholder="请选择部门归属" @change="queryUser"
                            clearable>
                            <el-option v-for="dict in sysDeptList" :key="dict.deptId" :label="dict.deptName"
                                :value="dict.deptId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="顾问姓名" prop="empName">
                        <el-input v-model="queryUserParams.params.empName" placeholder="顾问姓名" @blur="queryUser" />
                    </el-form-item>
                </el-row>
                <div class="check_div">
                    分配给：
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                        @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="checkedUsers" @change="handleCheckedCitiesChange">
                        <el-checkbox-button v-for="user in users" border :label="user.userId" :key="user.userId">{{
                            user.nickName }}</el-checkbox-button>
                    </el-checkbox-group>
                    <div class="check_div_btn"><el-button type="primary" @click="batchNewDistribute">分配</el-button></div>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import {
    getAllDept,
    queryUser,
    newDataDistr
} from "@/api/crmsys/custinfo/custinfo";
export default {
    name: "userSelect",
    data() {
        return {
            queryUserParams: {
                params: {
                    queryUserType: null,
                    queryOrgList: null,
                    empName: null
                }
            },
            checkAll: false,
            checkedUsers: [],
            users: [],
            isIndeterminate: false,
            sysDeptList: [],
            sysUserList: [],

        }
    },
    props: {
        selectids: {
            type: Array,
            default: []
        }
    },
    watch: {
        selectids(newvalue, oldvalue) {
            this.selectids = newvalue;
        }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getAllDept();
    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {

    },
    // methods方法
    methods: {
        /** 获取权限内的部门归属信息 */
        getAllDept() {
            getAllDept().then(response => {
                if (response.code == 200) {
                    this.sysDeptList = response.data;
                } else {
                    this.$message.error(response.msg);
                }
            });
        },
        /** 获取用户信息 */
        queryUser() {
            queryUser(this.queryUserParams).then(response => {
                this.users = response.data.distrUserList;
                this.checkedUsers = [];
            })
        }, handleCheckAllChange(val) {
            if (val) {
                this.users.forEach(item => {
                    this.checkedUsers.push(item.userId);
                });
            } else {
                this.checkedUsers = [];
            }
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.users.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.users.length;
        },
        batchNewDistribute() {
            if (this.selectids.length == 0) {
                this.$message.error("请选择要进行分配的客户");
                return;
            }
            if (this.checkedUsers.length == 0) {
                this.$message.error("请选择要分配给的顾问");
                return;
            }
            newDataDistr(this.selectids, this.checkedUsers).then(response => {
                if (response.code == 200) {
                    this.$message({
                        message: response.msg,
                        type: 'success'
                    });
                    this.$emit('callbackUser');
                } else {
                    this.$message.error(response.msg);
                }
            });



        }

    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.check_div {
    width: 100%;
    /* border: .5px solid rgb(209 203 203);
     */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
    padding-left: 55px;
    border-radius: 2px
}

.check_div_btn {
    padding-top: 10px;
    padding-right: 10%;
    text-align: right;
}

.card_userSelect {
    margin-bottom: 10px;
}
</style>
